<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


    <link rel="stylesheet" href="./lib/kendo/css/kendo.common-material.min.css" />
    <link rel="stylesheet" href="./lib/kendo/css/kendo.material.min.css" />
    <link rel="stylesheet" href="./lib/kendo/css/kendo.material.mobile.min.css" />

    <style>
        html {
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
</head>

<body>




    <div id="surface" class="k-content" style="width: 1550px; height: 165px;"></div>

    <script src="./lib/kendo/js/jquery.min.js"></script>
    <script src="./lib/kendo/js/kendo.all.min.js"></script>


    <script>
        // Import the Drawing API namespaces.
        var geom = kendo.geometry;
        var draw = kendo.drawing;

        // Create the square border by drawing a straight path.
        var path = new draw.Path({
            stroke: {
                color: '#dfdfdf', // "#9999b6",
                width: 1
            }
        });

        // The path is constructed using a chain of commands.
        path.moveTo(0, 0)
            .lineTo(150, 0).lineTo(150, 65).lineTo(0, 65)
            .close();

        // This rectangle defines the image position and size.
        var imageRect = new geom.Rect(
            new geom.Point(5, 5),
            new geom.Size(50, 50)
        );

        // Create the image. Uses a URL to create a bitmap image.
        var imageUrl = "https://demos.telerik.com/kendo-ui/content/dataviz/diagram/people/diego.jpg";
        var image = new draw.Image(imageUrl, imageRect);

        // Create the text. The point defines the top left corner from where the text will be drawn.
        var text = new draw.Text(
            "Diego Roel",
            new geom.Point(60, 25),
            { font: "bold 15px Arial" }
        );

        var path2 = new draw.Path({
            stroke: {
                color: '#000', // "#9999b6", '#dfdfdf'
                width: 1
            }
        });

        path2.moveTo(0, 80);

        // The following commands are interchangeable
        path2.lineTo(1500, 80);
        //path.lineTo([200, 200]);
        //path.lineTo(new geom.Point(200, 200));

        // Place all the shapes in a group so they can be treated as a single entity.
        var group = new draw.Group();
        group.append(path, image, text, path2);

        // Translate the group to make the coordinates of the element relative.
        group.transform(
            geom.transform().translate(50, 50)
        );

        // Create a drawing surface and render the scene.
        var surface = draw.Surface.create($("#surface"));
        surface.draw(group);
    </script>
</body>

</html>